<template>
  <el-dialog title="项目协作" :visible="visible" width="630px" @close="handleClose">
    <div class="p-20">
      <p class="s-title"><span>需要共享的项目</span></p> 
      <div class="mt-10">
        <div class="m-project-item">
          <i class="icon icon-project"></i>
          <span>{{project.name}}</span>
        </div>
      </div>
      <p class="s-title mt-20">谁可以访问</p> 
      <div class="m-project-box">
        <div v-for="item in teamList" class="item">
          <el-row :gutter="20" type="flex" align="middle">
            <el-col :span="14">
              <div class="user-head mini">
                <img :src="item.head" alt="">
              </div>
              <span class="ml-10">{{item.name}}</span>
            </el-col>
            <el-col :span="7">
              <span>{{item.type}}</span>
            </el-col>
            <el-col :span="3"></el-col>
              <span><i class="icon el-icon-close"></i></span>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-form class="mt-20 mb-20" label-width="60px" label-position="left" size="small">
        <el-form-item label="共享">
          <el-input v-model="share" placeholder="输入需要共享项目的同事姓名"></el-input>
        </el-form-item>
      </el-form>
      <div class="form-bottom t-right">
        <ui-button size="medium" @click="handleClose">取消</ui-button>
        <ui-button size="medium" type="blue">确定</ui-button>
      </div>
    </div>
    
  </el-dialog>
</template>

<script>
  import {Dialog, Row, Col, Input, Form, FormItem} from 'element-ui'
  export default {
    components: {
      [Dialog.name]: Dialog,
      [Row.name]: Row,
      [Col.name]: Col,
      [Input.name]: Input,
      [Form.name]: Form,
      [FormItem.name]: FormItem,
    },
    props: ['visible'],
    data () {
      return {
        id: '',
        project:{
          name: '三文鱼项目',
        },
        teamList: [{
          name: '团队账号',
          type: '招聘专员',
          head: 'https://apic.douyucdn.cn/upload/avatar/003/92/16/12_avatar_middle.jpg', //头像
        },
        {
          name: 'Leqin Wang',
          type: 'Tencent HR',
          head: 'https://apic.douyucdn.cn/upload/avatar/003/92/16/12_avatar_middle.jpg', //头像
        },
        {
          name: 'Alian',
          type: 'Tencent HR',
          head: 'https://apic.douyucdn.cn/upload/avatar/003/92/16/12_avatar_middle.jpg', //头像
        }],
        share: ''
      }
    },
    methods: {
      handleClose() {
        this.$emit('update:visible', false)
      }
    }
  }
</script>

<style lang="scss" scoped>
.s-title{
  font-size: 14px;
  font-weight: 500;
  color: #5e5e5e
}
.m-project-item{
  span{
    line-height: 22px;
    vertical-align: middle;
    margin-left: 5px;
    height: 22px;
    color: #919191;
  }
}
.m-project-box{
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  padding: 12px 20px;
  margin-top: 10px;
  .item{
    margin:8px 0;
    span{
      font-size: 14px;
      color: #919191;
    }
    .icon{
      cursor: pointer;
      font-size: 16px;
      color: #919191;
      font-weight: 400;
    }
    .icon:hover{
      opacity: .8;
    }
  }
  .user-head{
    border-radius: 0;
  }
}
</style>
